<template>
  <div class="container" style="display: block">
    <div class="toolbar" style="display: flex;justify-content:center;margin-bottom: 15px;margin-top: 15px" >
      <div style="display: flex;justify-content:space-between;flex-direction: row;width: 1000px">
        <div>
          <el-button type="primary" @click="creatIssue()">新建</el-button>
        </div>
        <div >
          <div class="sub-searchBox" style="width: 300px" >
            <div >
              <el-input class="searchBar" v-model="search" placeholder="搜索Issue" :prefix-icon="Search">
                <template #append>
                  <el-button @click="localSearch"  :icon="Search" />
                </template>
              </el-input>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-wrapper" style="display: flex;justify-content:center;">
      <div class="box-body" style="display: block; width: 1000px">
        <div class="header" style="border-bottom:1px solid black;height:50px;">
          <div class="header-wrapper" style="display: flex;margin-top: 20px;">
            <div class="header-option"
                 style="display: flex;justify-content:space-evenly;width: 200px; margin-left: 15px">
              <div>
                <!--Mode0，显示全部-->
                <el-button @click="changeCurrentMode(0)">
                  <div style="margin-right: 5px">
                    <el-icon :size="20">
                      <FolderOpened/>
                    </el-icon>
                  </div>
                  Open
                </el-button>
              </div>
              <div>
                <!--Mode1，只显示statusRead===1的issue-->
                <el-button @click="changeCurrentMode(1)">
                  <div style="margin-right: 5px">
                    <el-icon :size="20">
                      <Folder/>
                    </el-icon>
                  </div>
                  Closed
                </el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="pull-menu" style="display: block">
          <div class="pull-menu-notempty" v-if="total>0">
            <el-scrollbar max-height="410px">
              <div v-for="item in TableData" class="pull-menu-view-item">
                <div  style="display: block;padding: 10px">
                  <div class="header" style="display: flex;padding: 5px">
                    <div class="closeStatus" style="display: flex;align-content: center">
                      <div v-if="item.isClosed===true" style="color: red;display: flex;align-items: center">
                        <el-icon>
                          <Folder/>
                        </el-icon>
                      </div>
                      <div v-else-if="item.isClosed===false" style="color: green;display: flex;align-items: center">
                        <el-icon>
                          <FolderOpened/>
                        </el-icon>
                      </div>
                    </div>
                    <div class="Name" >
                      <el-link @click="toIssue(item.issueId)" style="font-size: 20px;color: black" >
                        {{item.issueTitle}}
                      </el-link>
                    </div>
                  </div>
                  <div class="info" style="display: flex;">
                    <div>
                      {{item.postName}}
                    </div>
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <div class="pull-menu-view-empty" v-else>
            <div style="height: 410px;display: flex;align-items: center;justify-content: space-evenly">
              <div style="display: block">
                <div style="display: flex;justify-content: space-evenly">
                  <el-icon>
                    <Loading/>
                  </el-icon>
                </div>
                <div style="display: flex;justify-content: space-evenly">
                  <p>
                    没有符合要求的工单
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 10px 0;display: flex;justify-content:center" >
      <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {List,Search,Loading,CloseBold,Select,Reading,Folder,FolderOpened} from '@element-plus/icons-vue';
import request from "@/utils/request";
export default {
  setup() {
    return {
      Search,
    }
  },
  data(){
    return{
      userName:'',
      repoName:'',
      userId:'',
      currentMode:0,
      TableData:[
      ],
      total:1,
      search:''
    }
  },
  name: "PullView",
  components: {
    Select,
    List,
    Loading,
    CloseBold,
    Reading,
    Folder,
    FolderOpened
  },
  created(){
    this.repoName=this.$route.params.repoName
    this.userName=this.$route.params.userName
    this.userId=sessionStorage.getItem("userId")
    console.log(this.repoId)
    this.load()
  },
  methods:{
    toIssue(issueId){
      this.$router.push({
        path:"/"+this.userName+"/"+this.repoName+"/issues/"+issueId
      });
    },
    localSearch(){
      request.get("/repo/issues/", {
        params:{
          currentPage: 1,
          pageSize: 10,
          repoName:this.repoName,
          searchMode:this.currentMode,
          searchName:this.search,
          ownerName:this.userName
        }
      }).then(res => {
        console.log(res)
        this.TableData=res.data.records
        this.total=res.data.total
      })
    },
    load(){
      request.get("/repo/issues/", {
        params:{
          currentPage: 1,
          pageSize: 10,
          repoName:this.repoName,
          searchMode:this.currentMode,
          ownerName:this.userName
        }
      }).then(res => {
        console.log(res)
        this.TableData=res.data.records
        this.total=res.data.total
      })
    },
    creatIssue(){
      this.$router.push({
        path:"/"+this.userName+"/"+this.repoName+"/issues/createissue"
      });
    },

    changeCurrentMode(mode){
      this.currentMode=mode
      console.log(this.currentMode)
      this.load()
    },

    handleSizeChange(pageSize){
      this.pageSize= pageSize
      this.load()
    },
    handleCurrentChange(pageNum){
      this.currentPage= pageNum
      this.load()
    },
  }
}
</script>

<style scoped>

.pull-menu-view-item:hover{
  background: rgba(0,159,255,0.20);
}

a:hover{
  color:#009fff;
}

.sub-searchBox{
  position: relative;
  margin-left: 380px;
  width: 600px;
}

.box-body{
  border: 1px solid #30363d;
  border-radius: 3px;
  width: 1000px;
  align-self: center;
}
</style>
